<template>
    <div>
        <div class="navbar-div">
            <van-nav-bar
                :title="categoryName"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
            />
        </div>
        <div class="goods" v-if="categoryList.length>0">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
            >
                <van-row gutter="20" type="flex">
                    <van-col span="12" @click="jumpGoodsInfo(item.id)" v-for="( item, index) in categoryList" :key="index">
                         <div class="goodsInfo">
                            <div class="goodsImage">
                                <img :src="item.productImg" width="100%"/>
                            </div>
                            <div class="goodsName">{{item.productName}}</div>
                            <div class="goodsPrice">
                                <b class="presentPrice">现价:￥{{item.presentPrice}}</b>
                                <span class="oldPrice">原价:￥{{item.oldPrice}}</span>
                            </div>
                        </div>
                    </van-col>
                </van-row>
            </van-list>
        </div>
        <div v-else>
            <p>暂无相关商品</p>
            <p style="font-size:13px">正在陆续上架,敬请关注~~</p>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data(){
            return {
                categoryList: [],
                pageNum: 1,
                categoryId: null,
                categoryName: null,
                loading: false,   //上拉加载使用
                finished: false,  //上拉加载是否没有数据了
            }
        },
        created(){
            this.categoryId= this.$route.params.categoryId ? this.$route.params.categoryId : 1
            this.categoryName = this.$route.params.categoryName ? this.$route.params.categoryName : '新鲜水果'
            console.log(this.categoryId)
            this.getGoodInfo()
        },
        mounted(){
            this.$store.dispatch('HIDENAV')
        },
        destroyed(){
            this.$store.dispatch('SHOWNAV')
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },
            getGoodInfo(){//根据主类id获取商品
                axios({
                     url: 'http://localhost:3000/goods/getGoodsInfoByCategoryID',
                     method: 'post',
                     data:{
                            categoryId: this.categoryId,
                            pageNum: this.pageNum

                        } 
                }).then(response =>{
                    console.log(response.data);
                    if(response.status == 200  ){
                        if(response.data.message){
                            this.pageNum++
                            console.log(this.pageNum);
                            this.categoryList=this.categoryList.concat(response.data.message)
                        }else{
                            this.finished = true;
                        }
                    } 
                    this.loading=false;
                    console.log(this.finished)
                })
                .catch(error=>{
                    console.log(error)
                })
            },
            onLoad(){//上拉加载函数
                setTimeout(()=>{
                    this.getGoodInfo()
                },1000)
            },
            jumpGoodsInfo(id){//跳转到商品详细页
                console.log("id========",id);
                this.$router.push({name:'goodDetail',params:{goodsId:id}})
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import '../assets/css/goods.css'
</style>